
	var today = new Date();

	var currentDate = today.getDate();
	var currentDay = today.getDay();
	var currentMonth = today.getMonth();
	var currentYear = today.getFullYear();

	var _numDaysIn = function(currentMonth,currentYear) {
		if (currentMonth==3 || currentMonth==5 || currentMonth==8 || currentMonth==10) return 30;
		else if ((currentMonth==1) && _leapYear(currentYear)) return 29;
		else if (currentMonth==1) return 28;
		else return 31;
	};
	var _leapYear = function(currentYear) {
		if (((currentYear % 4 == 0) && currentYear % 100 != 0) || currentYear % 400 == 0) return true;
		else return false;
	};
	var _prevMonth = function(currentMonth) {
		if (currentMonth == 0) return 11;
		else return (currentMonth-1);
	};
	var _nextMonth = function(currentMonth) {
		if (currentMonth == 11) return 0;
		else return (currentMonth+1);
	};
	var _prevYearMonth = function(currentYear) {
		if ((currentYear % 100) == 1) return ((currentYear-100)+11);
		else return (currentYear-1);
	};
	var _nextYearMonth = function(currentYear) {
		if ((currentYear % 100) == 12) return ((currentYear-11)+100);
		else return (currentYear+1);
	};

	function leaveData(currentMonth,currentYear){

		$.getJSON( "holiday", { month: (currentMonth+1), year: currentYear } ,function( json ) {
							 // sourcedata = jQuery.parseJSON(json);
							 drawTable( currentMonth, currentYear,json);
							});
	}


	var _months = [ 'Januari', 'Februari', 'Mac', 'April', 'Mei', 'Jun', 'Julai', 'Ogos', 'September', 'Oktober', 'November', 'Disember' ];
	var _weekdays = [ 'Ahad', 'Isnin', 'Selasa', 'Rabu', 'Khamis', 'Jumaat', 'Sabtu' ];


	function drawTable( selMonth, selYear,data){
		
		var prevMonth = _prevMonth(selMonth);
		var nextMonth = _nextMonth(selMonth);
		var prevYear = selYear - 1;
		var nextYear = selYear + 1;
		
		// console.log( _months[prevMonth] +' < '+ _months[selMonth] +' > '+ _months[nextMonth] );
		// console.log( prevMonth +' < '+ selMonth +' > '+ nextMonth );

		var totalDays = _numDaysIn(selMonth,selYear);

		var table = '';
		table = '<div class="row-fluid">';
		table += '<div class="span12 text-center">';
		table += '<a href="#" class="pull-left" onclick="leaveData('+selMonth+','+prevYear+')">'+prevYear+'&nbsp;<i class="icon-chevron-left"></i></a>&nbsp;';
		table += '<strong>'+selYear+'</strong>';
		table += '&nbsp;<a href="#" class="pull-right"  onclick="leaveData('+selMonth+','+nextYear+')"><i class="icon-chevron-right"></i>&nbsp;'+nextYear+'</a>';
		table += '</div>';
		table += '</div>';
		table += '<div class="row-fluid">';
		table += '<div class="span12 text-center">';
		table += '<a href="#" class="pull-left" onclick="leaveData('+prevMonth+','+selYear+')">'+_months[(prevMonth == 12)? 0:prevMonth] +'&nbsp;<i class="icon-chevron-left"></i></a>&nbsp;';
		table += '<strong>'+_months[selMonth]+'</strong>';
		table += '<a href="#" class="pull-right" onclick="leaveData('+nextMonth+','+selYear+')"><i class="icon-chevron-right"></i>&nbsp;'+_months[(nextMonth == 12)? 0:nextMonth] +'</a>';
		table += '</div>';
		table += '</div>';


		table += '<div class="row-fluid">';
		table += '<div class="span12 text-center">';
		table += "<table class='table table-bordered'>"

		table += '<thead>';
		table += '<tr>';

		for(x in _weekdays){

			table += '<td width="100px" style="background-color: #f5f5f5;"><div class="text-center"><strong>'+_weekdays[x]+'</strong></div></td>';
		}
		
		table += '</tr>';
		table += '</thead>';

		table += '<tbody>';

		var dayPerWeek = _weekdays.length;
		var weekPermonth = Math.floor( totalDays / dayPerWeek ) + 1 ;

		var dayOfTable = '' ;
		var todayClass = '';

		var begin = new Date(selYear, selMonth, 1);
		var dayIs = begin.getDay();
		
		if((dayIs > 4 && totalDays == 31) || dayIs > 5) weekPermonth = weekPermonth + 1;
		
		for (var i=1;i<(weekPermonth+1);i++){

			if(i==1){

				table += '<tr>';
				for (x=0;x<(dayPerWeek);x++){

					if(x == dayIs){
						dayOfTable = 1;
					}

					tdBg = 'onMouseOver="changeBg(this)" ';
					tdBg += 'style="line-height: 80px;';
					tdBg += (currentDate == dayOfTable && currentYear == selYear && currentMonth == selMonth)?'background-color: #dff0d8;':'';
					tdBg += (dayOfTable == '')?'background-color: #000;':'';
					tdBg += ((x == 0 || x == 6) && dayOfTable != '')?'background-color: #fbeed5;':'';
					tdBg += (dayOfTable > 0 && dayOfTable != '')?'cursor:pointer;':'';
					tdBg += '"';
					tdBg += (dayOfTable > 0 && dayOfTable != '')? ' id="'+dayOfTable+'_'+selMonth+'_'+selYear+'"' : '';

					act = 'onclick="addEvent('+selYear+','+ selMonth+','+dayOfTable+')"';

					table += '<td width="100px" '+tdBg+' >';
					// table += (dayOfTable > 0 && dayOfTable != '')?'<div '+act+' style="line-height: 20px;"class="pull-right"><i class="icon-plus"></i></div>':'';
					table += '<div style="line-height: 20px;" class="text-center"><strong>'+dayOfTable+'</strong></div>';
					table += '</td>';

					if(dayOfTable > 0 && dayOfTable != ''){
						dayOfTable++;
					}
				}
				table += '</tr>';

			}else if(i == weekPermonth){

				table += '<tr>';
				for (x=0;x<(dayPerWeek);x++){

					if(dayOfTable > totalDays){
						dayOfTable = '';
					}

					tdBg = 'onMouseOver="changeBg(this)" ';
					tdBg += 'style="line-height: 80px;';
					tdBg += (currentDate == dayOfTable && currentYear == selYear && currentMonth == selMonth)?'background-color: #dff0d8;':'';
					tdBg += (dayOfTable == '')?'background-color: #000;':'';
					tdBg += ((x == 0 || x == 6) && dayOfTable != '')?'background-color: #fbeed5;':'';
					tdBg += (dayOfTable > 0 && dayOfTable != '')?'cursor:pointer;':'';
					tdBg += '"';
					tdBg += (dayOfTable > 0 && dayOfTable != '')? ' id="'+dayOfTable+'_'+selMonth+'_'+selYear+'"' : '';

					act = 'onclick="addEvent('+selYear+','+ selMonth+','+dayOfTable+')"';

					table += '<td width="100px" '+tdBg+' >';
					// table += (dayOfTable > 0 && dayOfTable != '')?'<div '+act+' style="line-height: 20px;"class="pull-right"><i class="icon-plus"></i></div>':'';
					table += '<div style="line-height: 20px;" class="text-center"><strong>'+dayOfTable+'</strong></div>';
					table += '</td>';
					
					if(dayOfTable < (totalDays+1) && dayOfTable != ''){
						dayOfTable++;
					}
					
				}
				table += '</tr>';

			}else{

				table += '<tr>';
				for (x=0;x<(dayPerWeek);x++){

					tdBg = 'onMouseOver="changeBg(this)"';
					tdBg += 'style="line-height: 80px;cursor:pointer;';
					tdBg += (currentDate == dayOfTable && currentYear == selYear && currentMonth == selMonth)?'background-color: #dff0d8;':'';
					tdBg += (dayOfTable == '')?'background-color: #d9edf7;':'';
					tdBg += ((x == 0 || x == 6) && dayOfTable != '')?'background-color: #fbeed5;':'';
					tdBg += '"';

					act = 'onclick="addEvent('+selYear+','+ selMonth+','+dayOfTable+')"';

					table += '<td width="100px" id="'+dayOfTable+'_'+selMonth+'_'+selYear+'" '+tdBg+' >';
					// table += '<div '+act+' style="line-height: 20px;"class="pull-right"><i class="icon-plus"></i></div>';
					table += '<div style="line-height: 20px;" class="text-center '+todayClass+'"><strong>'+dayOfTable+'</strong></div>';
					table += '</td>';
					dayOfTable++;
				}
				table += '</tr>';
			}
		}

		table += '</tbody>';

		table +='</table>';
		table += '</div>';
		table += '</div>';


		$('#calendar').html(table);

		for(x in data){
			console.log( "JSON Data: " + '#'+x+'_'+selMonth+'_'+selYear);

			var cuti = '<div style="line-height:20px;font-size:10px;padding:3px;overflow:hidden" class="text-info">'+data[x][selMonth+1][selYear]['leave']+'</div>';

			$('div #calendar table '+'#'+x+'_'+selMonth+'_'+selYear).append(cuti);
			// $('#'+x+'_'+selMonth+'_'+selYear).empty();
		}

	}

	function changeBg(element){

		$(element).hover(function(){
			$(this).css('opacity',0.6);
		},function(){
			$(this).css('opacity',1);
		});
	}


$(document).ready(function() {

	leaveData(currentMonth,currentYear);
}); 